<template>
  <div class="app-container">
    <!-- <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>泵房管理</span>
      </div>
      <div class="text item">
        <el-button type="primary" size="small">添加泵房</el-button>
      </div>
    </el-card> -->
<el-descriptions class="margin-top" title="二级泵房总览" :column="4" :size="size" border>
    <template slot="extra">
      <!-- <el-button type="primary" size="small">操作</el-button> -->
             <el-tag effect="dark" type="success">运行中</el-tag>

    </template>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        流量
      </template>
      <span style="color: #4359AE">5000</span> m3/h
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        入口压力
      </template>
            <span style="color: #4359AE">49.8</span> Hz
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        出口压力
      </template>
    <span style="color: #4359AE">0.152</span> MPa
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        瞬时功率
      </template>
    <span style="color: #4359AE">22.5</span> kw
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>


      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        运行效率
      </template>
    <span style="color: #4359AE">67</span> %
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>

   
  </el-descriptions>

      <el-divider></el-divider>



<el-descriptions class="margin-top" title="二级泵房1#泵" :column="4" :size="size" border>
    <template slot="extra">
      <!-- <el-button type="primary" size="small">操作</el-button> -->
             <el-tag effect="dark" type="success">运行中</el-tag>

    </template>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-user"></i>
        转速
      </template>
      <span style="color: #4359AE">1500</span> rpm
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-mobile-phone"></i>
        流量
      </template>
      <span style="color: #4359AE">5000</span> m3/h
    </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        频率
      </template>
            <span style="color: #4359AE">49.8</span> Hz
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-location-outline"></i>
        温度
      </template>
      <span style="color: #4359AE">31.0</span> ℃
    </el-descriptions-item>

    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        入口压力
      </template>
    <span style="color: #4359AE">0.152</span> MPa
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>

   </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        泵前压力
      </template>
    <span style="color: #4359AE">0.152</span> MPa
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>


       </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        泵后压力
      </template>
    <span style="color: #4359AE">0.253</span> MPa
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>


       </el-descriptions-item>
    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        出口压力
      </template>
    <span style="color: #4359AE">0.242</span> MPa
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>



      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        A相电流
      </template>
    <span style="color: #4359AE">40</span> A
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>

     <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        B相电流
      </template>
    <span style="color: #4359AE">40</span> A
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>


      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        C相电流
      </template>
    <span style="color: #4359AE">40</span> A
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>


    <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        瞬时功率
      </template>
    <span style="color: #4359AE">22.5</span> kw
      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>


      <el-descriptions-item>
      <template slot="label">
        <i class="el-icon-tickets"></i>
        运行效率
      </template>
    <span style="color: #4359AE">67</span> %   <i class="el-icon-video-play rotate-icon"></i>

      <!-- <el-tag size="small">学校</el-tag> -->
    </el-descriptions-item>

   
  </el-descriptions>

  </div>
</template>

<script>

 export default {
    data () {
      return {
        size: ''
      };
    }
  }


  
</script>

<style scoped>

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
 
.rotate-icon {
  animation: rotate 2s linear infinite;
  color: green;
}
</style>
